<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Dashboard Admin Documentation</title>
	<link rel="stylesheet" href="./css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8" />
	<link rel="stylesheet" href="./docs/docs.css" type="text/css" media="screen" title="no title" charset="utf-8" />	
	<link rel="stylesheet" href="./css/grid.css" type="text/css" media="screen" title="no title" charset="utf-8" />
	<link rel="stylesheet" href="./css/buttons.css" type="text/css" media="screen" title="no title" charset="utf-8" />

</head>

<body id="top">

<div id="wrapper" class="xgrid">
	
	<div id="header">
		
		<div id="title" class="x10">
			<h1>
				<a href="#top">Dashboard Admin</a>
				<a id="version" href="javascript:;">1.0</a>
			</h1>
		</div>
		
		<div id="demo" class="x2">
			
			<a href="index.html" class="btn btn-small btn-orange">View Demo</a>
			
		</div> 
		
		
	</div>
	
	
	<div id="nav">
		<ul id="toc">
			<li><a href="#support">Support</a></li>
			<!-- <li><a href="#layouts">Layouts</a></li> -->
			<li><a href="#menu">Menu</a></li>
			<li><a href="#tables">Tables</a></li>
			<li><a href="#grid">Grid Layout</a></li>
			<li><a href="#forms">Forms</a></li>
			<li><a href="#charts">Visualize Charts</a></li>
			<li><a href="#buttons">Buttons</a></li>
			<li><a href="#widgets">Widgets</a></li>
			<!-- <li><a href="#customize">Customize</a></li>-->
			
		</ul>
	</div>
	
	
	
	
	<div id="start" class="p2 x9 a1">
		
		<h2 id="support">Support</h2>

		
		<p>Thank you for purchasing Dashboard Admin. If you have any questions that have not been answered below, feel free to contact me via my Theme Forest account. Thanks again!</p>

	<p><a href="http://themeforest.net/user/MadeByAmp" class="support_link">http://themeforest.net/user/MadeByAmp</a></p>	
	
	
	</div>	
	





	<div class="p2 x9 a1">
		
		<h2 id="menu">Menu</h2>


		<img src="docs/screenshots/menu.jpg" class="mini_grab" />
		
		<h3>Regular Tab</h3>
		<p>The code below is used to create a regular tab in the menu.</p>
		
		
<pre><code>&lt;li class=""&gt;&lt;a href="javascript:;"&gt;Home&lt;/a&gt;&lt;/li&gt;</code></pre>


		<h3>Tab With Icon</h3>
		<p>The code below is used to create a tab with an icon in the menu.</p>
		
		
<pre><code>
&lt;li class="nav_icon"&gt;
	&lt;a href="javascript:;"&gt;
		&lt;span class="ui-icon ui-icon-home"&gt;&lt;/span&gt;
		Home
	&lt;/a&gt;
&lt;/li&gt;</code></pre>


	<h3>Dropdown Tab</h3>
		<p>The code below is used to create a dropdown tab in the menu.</p>
<pre><code>
&lt;li class="nav_dropdown"&gt;
	&lt;a href="javascript:;"&gt;
		Styles
	&lt;/a&gt;
	
	&lt;div class="nav_menu"&gt;			
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="./pages/text.html"&gt;Buttons &amp; Text&lt;/a&gt;&lt;/li&gt;	
			&lt;li&gt;&lt;a href="./pages/grid.html"&gt;Grid Layout&lt;/a&gt;&lt;/li&gt;	
			&lt;li&gt;&lt;a href="./pages/tables.html"&gt;Tables&lt;/a&gt;&lt;/li&gt;	
			&lt;li&gt;&lt;a href="./pages/forms.html"&gt;Forms&lt;/a&gt;&lt;/li&gt;	
			&lt;li&gt;&lt;a href="./pages/charts.html"&gt;Charts&lt;/a&gt;&lt;/li&gt;						
		&lt;/ul&gt;		
	&lt;/div&gt;
&lt;/li&gt;</code></pre>
		














	</div>


	

	
	
	<div class="p2 x9 a1">
		
		<h2 id="tables">Tables</h2>
		
		<img src="docs/screenshots/14_tables.jpg"  class="screen_grab" />

		<h3>Basic Table</h3>
		
		
		<pre><code>
&lt;table class="data"&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Rendering engine&lt;/th&gt;
			&lt;th&gt;Browser&lt;/th&gt;
			&lt;th&gt;Platform(s)&lt;/th&gt;
			&lt;th&gt;Engine version&lt;/th&gt;
			&lt;th&gt;CSS grade&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;Trident&lt;/td&gt;
			&lt;td&gt;Internet Explorer 5.5&lt;/td&gt;
			&lt;td&gt;Win 95+&lt;/td&gt;
			&lt;td class="center"&gt;5.5&lt;/td&gt;
			&lt;td class="center"&gt;A&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Trident&lt;/td&gt;
			&lt;td&gt;Internet Explorer 6&lt;/td&gt;
			&lt;td&gt;Win 98+&lt;/td&gt;
			&lt;td class="center"&gt;6&lt;/td&gt;
			&lt;td class="center"&gt;A&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;
	</code></pre>
	
		<h3>Advanced Tables</h3>
		
		<p>To create an advanced table using the <a href="http://www.datatables.net/">Data Table Plugin</a> add the following attribute to any table</p>
		
<pre><code>&lt;table class="datatable"&gt;</code</pre>
			
<p><strong>-- OR -- </strong></p>
<p>In your javascript grab the table element you wish to use and attach the data table plugin like below:</p>
$('#myDataTable').dataTable ();
		
	</div>
	
	
	
	
	<div class="p2 x9 a1">
		
		<h2 id="grid">Grid Layout</h2>
		
		<p> The layout is based on a 12 column grid. Any combination of columns can be used in a row so long as the sum of the columns is not greater than 12. Columns are created by adding one of the classes .x1-.x12 to a div.portlet. </p>
		
		<img src="docs/screenshots/13_grid.jpg" class="screen_grab" />
				
		<p> <strong>Here are a few examples of a correct column layout. </strong></p>					

<pre>
&lt;div class="x12"&gt;col&lt;/div&gt;
			
&lt;div class="x6"&gt;col&lt;/div&gt;
&lt;div class="x6"&gt;col&lt;/div&gt;

&lt;div class="x8"&gt;col&lt;/div&gt;
&lt;div class="x4"&gt;col&lt;/div&gt;

&lt;div class="x4"&gt;col&lt;/div&gt;
&lt;div class="x4"&gt;col&lt;/div&gt;
&lt;div class="x4"&gt;col&lt;/div&gt;
</pre>

		<p> <strong>Here is an example of an incorrect column layout. As you'll see, the columns add up to 14 instead of 12.</strong></p>					
<pre>
&lt;div class="x8"&gt;col&lt;/div&gt;
&lt;div class="x6"&gt;col&lt;/div&gt;
</pre>

		
	</div>
	
	
	
	
	
	
	
	<div class="p2 x9 a1">
		
		<h2 id="forms">Forms</h2>
		
		
		<img src="docs/screenshots/15_form.jpg" class="screen_grab" />
		
<pre><code>
&lt;form class="form" action="" method="get" accept-charset="utf-8"&gt;
</code></pre>
		
		<p>All styled forms need to have the class .form</p>
		
		<p>To create a form with the labels on top of the fields, add the class .label-top to the form tag. The default for forms is labels to the left of fields and no classes are necessary for this to work.</p>

				
<pre><code>
&lt;div class="field"&gt;
	&lt;label for="subject"&gt;Subject&lt;/label&gt;
	&lt;input type="text" name="subject" value="" id="subject" class="medium" /&gt;				
	&lt;span class="field_help"&gt;This is the help text for the field&lt;/span&gt;
	&lt;span class="field_error"&gt;This field is invalid&lt;/span&gt;
&lt;/div&gt; &lt;!-- .field --&gt;
</code></pre>
		
		

		<p>Specify the label position using the class .label-top to create labels that are on top of the fields. Use the class .label-inline to create labels that are to the left of the fields. These two classes go on the main form tag.</p>

		<p>Input elements can contain the classes .small, .medium, .large to specify the size of the an input field.</p>
		
		<p>Specify field help text by adding SPAN.help_text</p>
		
		<h3>Uniform Plugin</h3>
		
		<p>To utilize the uniform plugin simply add the following class to your form tag: .uniform</p>
		
		<pre><code>&lt;form class="form uniform"&gt;</code></pre>
		
	</div>
	
	
	
	
	
	<div class="p2 x9 a1">
		
		<h2 id="charts">Charts</h2>
		
		
		<img src="docs/screenshots/16_chart.jpg" class="screen_grab" />
		
		<p>Sample charting data table below</p>
<pre><code>
&lt;table class="stats" data-chart="line"&gt;
	
	&lt;caption&gt;2009/2010 Sales by industry (Million)&lt;/caption&gt;

	&lt;thead&gt;
		&lt;tr&gt;
			&lt;td&gt;&nbsp;&lt;/td&gt;
			&lt;th&gt;Banking&lt;/th&gt;
			&lt;th&gt;Beauty&lt;/th&gt;
			&lt;th&gt;Insurance&lt;/th&gt;
			&lt;th&gt;Internet&lt;/th&gt;
			&lt;th&gt;Media&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th&gt;2009&lt;/th&gt;
			&lt;td&gt;3&lt;/td&gt;
			&lt;td&gt;4&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;14&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
		&lt;/tr&gt;
		
		&lt;tr&gt;
			&lt;th&gt;2010&lt;/th&gt;
			&lt;td&gt;5&lt;/td&gt;
			&lt;td&gt;5&lt;/td&gt;
			&lt;td&gt;6&lt;/td&gt;
			&lt;td&gt;11&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
		&lt;/tr&gt;		
	&lt;/tbody&gt;
	
&lt;/table&gt;

</code></pre>
		
		<h3>Charting Helper</h3>
		<p>The quickest and easiest way to create a chart is to add the class .stats and a data-chart attribute with chart type (line, area, bar, pie).</p>
		
		
<pre><code>
&lt;table class="stats" data-chart="line"&gt;
</code></pre>

<p><strong>-- OR --</strong></p>

<p>Attach the jquery visualize plugin to the table you want in your javascript file.</p>

<pre><code>
$('#myChartTable').visualize({ type: 'line' });
</code></pre>

	</div>
	
	
	
	
	
	<div class="p2 x9 a1">
		
		<h2 id="buttons">Buttons</h2>
		
		
		<img src="docs/screenshots/12_text.jpg"  class="screen_grab" />
		
<pre><code>
&lt;button class="<strong><em>btn-style   btn-color   btn-size   btn-icon</em></strong>"&gt;Button Text&lt;/button&gt;
</code></pre>



<h3>Colors</h3>	
<ol>	
	<li><strong>Blue</strong> - .btn-blue</li>

	<li><strong>Orange</strong> - .btn-orange</li>
	<li><strong>Red</strong> - .btn-red</li>
	<li><strong>Green</strong> - .btn-green</li>
	<li><strong>Black</strong> - .btn-black</li>

	<li><strong>Purple</strong> - .btn-purple</li>
	<li><strong>Navy</strong> - .btn-navy</li>
	<li><strong>Maroon</strong> - .btn-maroon</li>
	<li><strong>Grey</strong> - .btn-grey</li>

	<li><strong>Yellow</strong> - .btn-yellow</li>
	<li><strong>Teal</strong> - .btn-teal</li>
	<li><strong>Pink</strong> - .btn-pink</li>
</ol>

<div class="clear"></div>
<hr />

<h3>Sizes</h3>
<ol>	
	<li><strong>Small</strong> - .btn-small</li>
	<li><strong>Medium</strong> - no class needed</li>
	<li><strong>Large</strong> - .btn-large</li>	

</ol>


<div class="clear"></div>
<hr />


<h3>Styles</h3>
<ol>	
	<li><strong>Default</strong> - .btn</li>
	<li><strong>Icon</strong> - .btn-icon</li>
	<li><strong>Mini</strong> - .btn-mini</li>	

</ol>


<div class="clear"></div>
<hr />

	
<h3>Icons</h3>
<ol>	
	<li><strong>Comment</strong> - .btn-comment</li>
	<li><strong>Heart</strong> - .btn-heart</li>
	<li><strong>Star</strong> - .btn-star</li>	
	<li><strong>Cart</strong> - .btn-cart</li>	
	<li><strong>Print</strong> - .btn-print</li>		
	<li><strong>RSS</strong> - .btn-rss</li>		
	<li><strong>User</strong> - .btn-user</li>		
	<li><strong>Check</strong> - .btn-check</li>		
	<li><strong>Dollar</strong> - .btn-dollar</li>		
	<li><strong>Refresh</strong> - .btn-refresh</li>		
	<li><strong>Home</strong> - .btn-home</li>		
	<li><strong>Plus</strong> - .btn-plus</li>		
	<li><strong>Minus</strong> - .btn-minus</li>		
	<li><strong>Cross</strong> - .btn-cross</li>		
	<li><strong>Arrow Left</strong> - .btn-arrow-left</li>		
	<li><strong>Arrow Right</strong> - .btn-arrow-right</li>		
	<li><strong>Arrow Up</strong> - .btn-arrow-up</li>		
	<li><strong>Arrow Down</strong> - .btn-arrow-down</li>		

</ol>

<div class="clear"></div>	
<br />	
<hr />



		
	</div>
	
	
	
	
	
	
	
	
	

	<div class="p2 x9 a1">
		
		<h2 id="price">Pricing Tables</h2>
		
		
		
		<img src="docs/screenshots/17_upgrade.jpg"  class="mini_grab" />
	
<h3>Create pricing grid container</h3>
<pre>&lt;div class="apg-mini apg-mini-2"&gt;
	OPTIONS GO HERE
&lt;/div&gt;
</pre>

<p>Specify the number of options you want by using the following classes <strong class="highlight">apg-mini-2</strong>, <strong class="highlight">apg-mini-3</strong>, <strong class="highlight">apg-mini-4</strong></p>

<p>To add the options, use the html structure provided below and place each option container in the order you want them displayed.</p>

<h3>Create pricing box</h3>
<pre>&lt;div class="apg-option"&gt;		
	&lt;div class="apg-header"&gt;
		&lt;h1&gt;Standard&lt;/h1&gt;

	&lt;/div&gt;
	
	&lt;div class="apg-content"&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempo.&lt;/p&gt;
		
		&lt;ul&gt;
			&lt;li&gt;&lt;strong&gt;5&lt;/strong&gt; Email Accounts&lt;/li&gt;

			&lt;li&gt;&lt;strong&gt;5GB&lt;/strong&gt; Bandwidth&lt;/li&gt;
			&lt;li&gt;&lt;strong&gt;5&lt;/strong&gt; Domains&lt;/li&gt;

		&lt;/ul&gt;
	&lt;/div&gt;
	
	
	&lt;div class="apg-footer"&gt;
		&lt;span class="apg-price"&gt;$35&lt;span class="apg-label"&gt;/Mo&lt;/span&gt;&lt;/span&gt;

	  	&lt;a href="javascript:;" class="button"&gt;Order Now&lt;/a&gt;
	 &lt;/div&gt;
&lt;/div&gt;
</pre>

<h3>How to edit the feature text</h3>
<p>Simply modify the paragraph tag contained in .apg-features container. Be careful not to enter too much text for this.</p>

<h3>How to edit the features list</h3>
<p>To edit the features list, modify the items in the unordered list.</p>







		
	</div>












	<div class="p2 x9 a1">
		
		<h2 id="widgets">Widgets</h2>
		<h3>Tabs</h3>
		
		<img src="docs/screenshots/tabs.jpg" class="mini_grab" />
	

		<p>Below is the container for the tab widget. All panels must go in here.</p> 

<pre><code>
&lt;div class="tab_container"&gt; &lt;/div&gt;
</code></pre>

		<p>Below is the example code for tab navigation. The href attribute for each tab must be set to the id of the content that it shows. For example, if you have a div with the id of "tab4", then the tab attribute needs to be #tab4. </p>

<pre><code>
&lt;ul class="tabs"&gt; 
    &lt;li&gt;&lt;a href="#tab1"&gt;Tab #1&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="#tab2"&gt;Tab #2&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="#tab3"&gt;Tab #3&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="#tab4"&gt;Tab #4&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt;
</code></pre>



 

		<p>Below is the example code for tab content. To change the content, simply modify everything inside of the .tab_content div. </p>
<pre><code>
&lt;div id="tab4" class="tab_content"&gt; 
	&lt;img src="./images/coins_large.jpg" width="200" /&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;				            
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/div&gt; &lt;!-- #tab4 --&gt;
</code></pre>


		<h3>Accordion</h3>
		
		<img src="docs/screenshots/accordion.jpg" class="mini_grab" />
<p>Below is the container for the accordion widget. All panels must go in here.</p>
<pre><code>
&lt;div class="accordion_container"&gt; &lt;/div&gt;
</code></pre>		    


		
		<p>Below is the example code for an accordion panel and content. To change the content, simply modify everything inside of the .accordion_content div. </p>
<pre><code>
&lt;h2 class="accordion_panel"&gt;&lt;a href="#"&gt;Panel #2&lt;/a&gt;&lt;/h2&gt; 

&lt;div class="accordion_content"&gt; 
	&lt;img src="./images/rain_large.jpg" width="200" /&gt;
	&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
		
	&lt;p&gt;Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.&lt;/p&gt;			            
&lt;/div&gt; &lt;!-- .accordion_content --&gt;
</code></pre>


	</div>









	
	
<!-- 	

	
	<div class="p2 x9 a1">
			
			<h2 id="customize">Customize</h2>
			
			
		<img src="docs/screenshots/custom-theme.png"  class="screen_grab" />
			
			<p>Dashboard Admin is very easy to customize. Basic customization is presented in the carbon folder in the themes directory.</p>
			
			<p>Simple add the Carbon css file after all other stylesheets.</p>
			
			<pre><code>
&lt;link rel="stylesheet" href="./themes/carbon/custom.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;	
</code></pre>

			<p>Then just look in the carbon theme stylesheet to modify colors.</p>

		
	</div> -->



</div> <!-- #wrapper -->
<script type="text/javascript" charset="utf-8" src="./js/jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./docs/jquery.scrollTo.js"></script>

<script type="text/javascript" charset="utf-8">
	
$(document).ready ( function () {
	
	$('#toc a').live ('click' , function () 
	{ 		
		$.scrollTo ( $(this).attr ('href') , 1000 );
		//location.href = $(this).attr ('href');
		return false;		
	});
	
	var counter = 0;
	
	$('#toc a').each ( function () {
		
		counter++;
		
		$(this).text ( counter + '. ' + $(this).text () );
		
		var $h2 = $('body').find ('h2' + $(this).attr ('href') );
		
		$h2.text ( counter + '. ' + $h2.text () );
	});
	
	$('#toc a:first').attr ('href' , '#top');
});
</script>
</body></html>